<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>HOJ后台管理</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="./js/controller.js"></script>
  <script src="./js/myajax.js"></script>
  <script src="./js/filter.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">HOJ后台管理</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item"><a href="/front/index">返回主页</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li id="tab1" class="layui-nav-item">
          <a href="javascript:;">页面管理</a>
          <dl class="layui-nav-child">
            <dd id="tab1-1"><a href="./index">主页信息</a></dd>
            <dd><a href="javascript:;">bala bala</a></dd>
          </dl>
        </li>
        <li id="tab2" class="layui-nav-item">
          <a href="javascript:;">用户管理</a>
          <dl class="layui-nav-child">
            <dd id="tab2-1"><a href="./userList">用户概览</a></dd>
            <dd id="tab2-2"><a href="./code">代码查看</a></dd>
          </dl>
        </li>
        <li id="tab3" class="layui-nav-item">
          <a href="javascript:;">题目管理</a>
          <dl class="layui-nav-child">
            <dd id="tab3-1"><a href="./problemList">题目概览</a></dd>
            <dd id="tab3-2"><a href="./addProblem">添加题目</a></dd>
          </dl>
        </li>
        <li id="tab4" class="layui-nav-item">
          <a href="javascript:;">比赛管理</a>
          <dl class="layui-nav-child">
            <dd id="tab4-1"><a href="./contestList">比赛概览</a></dd>
            <dd id="tab4-2"><a href="./addContest">添加比赛</a></dd>
            <dd id="tab4-3"><a href="./contestUser">用户总览</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <table  class="layui-hide" id="demo" lay-filter="test"></table>
      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-md" lay-event="goBack"><i class="layui-icon">&#xe603;</i>返回</button>
          <button class="layui-btn layui-btn-md" lay-event="searchProblem"><i class="layui-icon">&#xe615;</i>按题号过滤</button>
          <button class="layui-btn layui-btn-md" lay-event="rejudge">重判选中记录</button>
        </div>
      </script>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="showCode">代码</a>
      </script>
      <script type="text/html" id="accepted">
        {{#  if(d.isAccepted == true){ }}
          <span>是</span>
        {{#  } else { }}
          <span style="color: red">否</span>
        {{#  } }}
      </script>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © Hunan University Online Judge
  </div>
</div>
<script src="./layui/layui.js"></script>
<script>
  //JavaScript代码区域
  var contestId = getUrlVar("contestId");
  if (isBlank(contestId) == true) {
    alert("contestId参数错误");
    window.location.href = "./contestList";
  }

  layui.use('element', function(){
    var element = layui.element;
  });
  var tab = document.getElementById("tab4");
  tab.className += "  layui-nav-itemed";
  var tab_t = document.getElementById("tab4-1");
  tab_t.className += " layui-this";

  var tableData;
  var postSet = new Set();
  var myTableOption = {
    elem: '#demo',
    toolbar: '#toolbarDemo',
    url: ojurl + "/admin/contest/solution/list", //数据接口
    page: true, //开启分页
    limit: 15,
    limits: [10,15,30,50],
    headers: {"token" : getName(tokenName)},
    where: {"contestId": contestId},
    parseData: function(res){ //res 即为原始返回的数据
      return {
        "code": res.code, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.data.count, //解析数据长度
        "data": res.data.list //解析数据列表
      };
    },
    response: {
      statusCode: 200 //规定成功的状态码，默认：0
    },
    cols: [[ //表头
      {type: 'checkbox'},
      {field: 'solutionId', width: 80, title: 'ID', sort: true},
      {field: 'isAccepted', title: '是否通过', width: 100, templet: '#accepted'},
      {field: 'submitTime', title: '提交时间', width: 160},
      {field: 'judgeTime', title: '判题时间', width: 160},
      {field: 'lang', title: '语言', width: 80},
      {field: 'problemId', title: '题号', width: 80},
      {field: 'userId', title: '用户ID', width: 80},
      {field: 'name', title: '用户名'},
      {field: 'maxMemory', title: '内存(M)'},
      {field: 'maxTime', title: '最长用时(MS)'},
      {field: 'sumTime', title: '总用时(MS)'},
      {field: 'sumCases', title: '总测试组数'},
      {field: 'passCases', title: '通过组数'},
      {width: 60, templet: '#barDemo', fixed: 'right'}
    ]],
    done: function(res, curr, count) {
      tableData = res.data;
    }
  };

  layui.use('table', function(){
    var table = layui.table;
    var form = layui.form;
    
    //第一个实例
    var tableObj = table.render(myTableOption);

    //监听单元格编辑
    table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
    //   console.log(obj.value); //得到修改后的值
    //   console.log(obj.field); //当前编辑的字段名
    //   console.log(obj.data); //所在行的所有相关数据 
      var data = obj.data;
      var jsonData = new Object();
      jsonData.userId = data.userId;
      jsonData.nick = data.nick;
      jsonData.password = data.password;
      postList[jsonData.userId] = jsonData;
    });

    //头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      if (obj.event == 'searchProblem') { //新建学校的用户
        layer.open({
          type: 1, 
          title: '按照题号过滤',
          area: ['520px', '380px'],
          shade: 0,
          content: '<form class="layui-form layui-form-pane" role="form" id="user" style="margin: 1em">'+
            '<div class="layui-form-item"><label for="problemId" class="layui-form-label">题号</label>'+
            '<div class="layui-input-block"><input type="text" class="layui-input" id="problemId" name="problemId"/></div></div>'+
            '</form>',
          btn: ['提交', '关闭'], //只是为了演示
          yes: function(){
            var problemId = document.getElementById("problemId").value;
            myTableOption.where = {"problemId" : base26SytemToDec(problemId), "contestId": contestId};
            myTableOption.url = ojurl + "/admin/contest/solution/search";
            tableObj.reload(myTableOption);
            layer.closeAll();
          },
          btn2: function(){
            layer.closeAll();
          }
        });
      }
      else if (obj.event == 'goBack') {
        window.location.href = "./contestList";
      }
      else if (obj.event == 'rejudge') {
        var list = new Array();
        for (var i of postSet) {
          list.push(i);
        }
        postSet.clear();
        rejudge(list);
      }
    });

    //监听工具条
    table.on('tool(test)', function(obj){
      var data = obj.data;
      var solutionId = data.solutionId;
      getCode(solutionId, layer);
    });

    table.on('checkbox(test)', function(obj){
      // console.log(obj.checked); //当前是否选中状态
      // console.log(obj.data); //选中行的相关数据
      // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
      if (obj.type == 'one') {
        solutionId = obj.data.solutionId;
        if (obj.checked == false) {
          postSet.delete(solutionId);
        }
        else {
          postSet.add(obj.data.solutionId);
        }
      }
      else {
        if (obj.checked == false) {
          postSet.clear();
        }
        else {
          var len = tableData.length;
          for (var i=0; i<len; ++i) {
            postSet.add(tableData[i].solutionId);
          }
        }
      }
    });
    
  });
</script>
</body>
</html>